<template>
  <ElTabs class="w-full"  v-model="activeName" >
    <ElTabPane v-for="opt in options" :label="opt.name" :name="opt.code">
      <component :is="opt.component" v-model="extras[opt.code]"></component>
    </ElTabPane>
  </ElTabs>
</template>

<script setup lang='ts'>
import Live from './components/live.vue'
import Data from './components/data.vue'
import Video from './components/video.vue'
import Exercises from './components/exercises.vue'
import { CourseTaskVo } from '@/modules/course/api/task';
const $props = defineProps<{
  data?:CourseTaskVo
}>()
provide('task_model',$props.data);
const model = defineModel({
  default: {
    lives: [],
    data: [],
    video: [],
    homeworks: [],
  }
})
const extras = ref(model.value)
const activeName = ref('data');
const options = [
  { code: 'data', name: '资料', component: Data },
  { code: 'homeworks', name: '习题', component: Exercises },
  { code: 'video', name: '案例视频', component: Data },
  { code: 'lives', name: '直播练习', component: Live },
]
watch(()=>extras.value,(v)=>{
  model.value = v
},{
  deep:true
})
</script>

<style></style>
